<template>
    <el-form ref="userFormRef" :model="userForm" :rules="rules" label-width="100px">
        <el-form-item label="菜单标题" prop="title">
            <el-input v-model="userForm.title" placeholder="输入菜单标题"></el-input>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
            <el-input v-model="userForm.name" placeholder="输入菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="菜单链接" prop="path">
            <el-input v-model="userForm.path" placeholder="输入菜单链接"></el-input>
        </el-form-item>
        <el-form-item v-if="!userForm.pid" label="菜单图标" prop="icon">
            <el-input v-model="userForm.icon" placeholder="输入菜单图标"></el-input>
        </el-form-item>
        <el-form-item label="菜单排序" prop="sort">
            <el-input-number v-model="userForm.sort" :min="0" :precision="0" :controls="false" placeholder="输入排序" class="w100"></el-input-number>
        </el-form-item>
        <el-form-item v-if="userForm.pid" label="菜单所属" prop="pid">
            <el-radio-group v-model="userForm.pid" class="user-dept">
                <el-radio v-for="item in dataList" :key="item.id" :value="item.id">
                    <span>{{ item.title }}</span>
                </el-radio>
            </el-radio-group>
        </el-form-item>

    </el-form>
</template>
<script setup>
const props = defineProps({
    dataList: {
        type: Array,
        default: () => []
    },
})
const userForm = ref({
    title: null,
    name: null,
    path: null,
    icon: null,
    pid: null
});

const rules = ref({
    title: [
        { required: true, message: '请输入菜单标题', trigger: 'blur' },
    ],
    name: [
        { required: true, message: '请输入菜单名称', trigger: 'blur' },
    ],
    path: [
        { required: true, message: '请输入菜单链接', trigger: 'blur' },
    ]
})

const reset = (type, data) => {
    for (const i in userForm.value) {
        userForm.value[i] = null;
    }
    
    if (data) {
        userForm.value = JSON.parse(JSON.stringify(data));
    }
}
const userFormRef = ref(null);
const validate = () => {
    return new Promise(async(resolve, reject) => {
        await userFormRef.value.validate((valid, fields) => {
            resolve(valid)
        })
    })
}
const getFormData = () => {
    return JSON.parse(JSON.stringify(userForm.value))
}
const resetForm = () => {
    userFormRef.value.resetFields()
}
defineExpose({
    getFormData,
    reset,
    validate,
    resetForm
})
</script>
<style lang="scss" scoped>
.user-dept {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    :deep(.el-radio) {
        margin-right: 0;
        width: 33.3%;
    }
}
</style>